<template>
  <div class="wh100 oh" style="padding: 20px">
    <button @click="handleChange">切换显示</button>
    <Gantt
        :head="head"
        :data="list"
        :head-data="table"
        :ganttType="ganttType"
        height="300px"
        ref="ganttRef"
        @on-click-text="onClickText"
    >
      <!--<template #name="{ row }">-->
      <!--  <span class="pl10">{{ row.name }}</span>-->
      <!--</template>-->
      <!--<template #schedule="{ row }">-->
      <!--  <span>{{ row.schedule + '%' }}</span>-->
      <!--</template>-->
    </Gantt>
  </div>
</template>
<script>
import Gantt from "@/components/gantt/index.es.js";
import TableTree from './packages/Gantt/components/table-tree/index.vue'

export default {
  components: {
    Gantt,
    TableTree
  },
  data() {
    return {
      show: true,
      ganttType: 'month',
      head: [
        {
          title: "部门",
          key: "dept",
          align: "left",
        },
        {
          title: "人数",
          key: "num",
        },
        {
          title: "已用工时",
        },
        {
          title: "任务时间",
        },
      ],
      table: [
        {
          name: "需求",
          rowspan: 7,
          children: [
            {
              name: '任务一',
              rowspan: 4,
              children: [
                {name: '任务一'},
                {name: '任务二', colspan: 2},
                {name: '任务三', colspan: 2},
                {name: '任务四', colspan: 2},
              ],
            },
            {name: '任务二', colspan: 2},
            {name: '任务三', colspan: 2},
            {name: '任务四', colspan: 2},
          ],
        }
      ],
      list: [
        {
          name: '技术部',
          startTime: "2024-3-10 10:00:00",
          endTime: "2024-3-15 00:00:00",
          finishTime: null,
          dept: "技术部",
          num: "2人",
          time: "2天",
          start: true,
          time2: "结束时间",
          schedule: 50
        },
        {
          name: '技',
          startTime: "2024-03-01 00:00:00",
          endTime: "2024-04-01 00:00:00",
          finishTime: "2024-03-22 00:00:00",
          dept: "技术部",
          num: "2人",
          time: "2天",
          start: true,
          time2: "结束时间",
          schedule: 100
        },
        {
          name: '技术部2',
          startTime: "2024-03-11 00:00:00",
          endTime: "2024-03-25 12:00:00",
          finishTime: "2024-03-22 12:00:00",
          dept: "技术部",
          num: "2人",
          time: "2天",
          start: true,
          time2: "结束时间",
        },
        {
          name: '技术部',
          startTime: "2024-03-07 00:00:00",
          endTime: "2024-03-27 12:00:00",
          finishTime: "2024-03-22 12:00:00",
          dept: "技术部",
          num: "2人",
          time: "2天",
          start: true,
          time2: "结束时间",
          schedule: 100
        },
        {
          name: '技术部',
          startTime: "2024-03-11 00:00:00",
          endTime: "2024-03-20 12:00:00",
          finishTime: "2024-03-27 00:00:00",
          dept: "技术部",
          num: "2人",
          time: "2天",
          start: true,
          time2: "结束时间"
        },
        {
          name: '技术部',
          startTime: "2024-03-11 00:00:00",
          endTime: "2024-03-20 12:00:00",
          finishTime: "2024-03-27 00:00:00",
          dept: "技术部",
          num: "2人",
          time: "2天",
          start: true,
          time2: "结束时间"
        },
        {
          name: '技术部',
          startTime: "2024-03-11 00:00:00",
          endTime: "2024-03-20 12:00:00",
          finishTime: "2024-03-27 00:00:00",
          dept: "技术部",
          num: "2人",
          time: "2天",
          start: true,
          time2: "结束时间"
        },
      ]
    }
  },
  mounted() {
    // this.list = new Array(100).fill(0).map((item, index) => {
    //   return {
    //     startTime: "2024-3-10 00:00:00",
    //     endTime: "2024-3-15 00:00:00",
    //     finishTime: null,
    //     dept: "技术部",
    //     num: "2人",
    //     time: "2天",
    //     start: true,
    //     time2: "结束时间",
    //   };
    // });
  },
  methods: {
    handleChange() {
      this.show = !this.show;
      this.$refs.ganttRef?.setGanttType(this.show ? "day" : "month");
    },
    onClickText(e) {
      console.log(e);
    }
  }
}
</script>
<style scoped>

</style>
